<template>
	<!-- 投放系统-推广链接统计 -->
	<d2-container class="d-flex flex-column">
		<template v-if="$hasPermission('delivery:spreadStatistics:index')">
			<div class="d-flex b-s mt-2 mb-10 j-sb" slot="header">
				<el-form class="d-flex b-s" :inline="true" size="small" :model="searchForm"
					@keyup.enter.native="getTableList(true)" @submit.native.prevent>
					<el-form-item label="订单日期">
						<el-date-picker v-model="dataForm.date" type="datetimerange" range-separator="至"
						value-format="timestamp" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="推广ID">
						<el-input v-model="dataForm.data_spread_id" placeholder="推广ID" clearable />
					</el-form-item>
					<el-form-item label="推广名称">
						<el-input v-model="dataForm.keyword" placeholder="推广名称" clearable />
					</el-form-item>
					<el-form-item prop="playlet_id" label="短剧名称">
						<el-select clearable v-model="dataForm.playlet_id" placeholder="请选择短剧" @focus="playletListFn">
							<el-option v-for="(item,index) in playletList" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button icon="el-icon-search" type="primary" @click="getTableList(true)">查询</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex">
					<vxe-toolbar ref="toolbarRef" custom :refresh="{ queryMethod: getTableList,code:'query' }"></vxe-toolbar>
				</div>
			</div>
			<vxe-table ref="xTable" border height="100%" resizable :data="dataList" :loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}">
				<vxe-column width="180" field="date" title="日期" sortable align="center"></vxe-column>
				<vxe-column width="180" field="data_spread_id" title="推广ID" sortable align="center"></vxe-column>
				<vxe-column width="180" field="spread_name" title="推广名称" align="center"></vxe-column>
				<vxe-column v-if="show_playlet_name" width="180" field="playlet_name" title="短剧名称" align="center"></vxe-column>
				<vxe-column width="180" field="today_first_user_pay_count" title="新增充值人数" sortable align="center"></vxe-column>
				<vxe-column width="180" field="today_first_user_pay_amonut" title="新增首充金额" sortable align="center"></vxe-column>
				<vxe-column width="180" field="today_all_user_pay_amonut" title="新增的总充值" sortable align="center"></vxe-column>
				<vxe-column width="180" field="today_user_arpu" title="新增付费用户arpu" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_amount" title="今日总充值" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_pay_count" title="今日总订单笔数" sortable align="center"></vxe-column>
				<vxe-column width="180" field="first_user_count" title="首充人数" sortable align="center"></vxe-column>
				<vxe-column width="180" field="first_user_pay_amonut" title="首充金额" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_virtually_pay_count" title="虚拟支付数" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_virtually_pay_amount" title="虚拟支付金额" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_wx_pay_count" title="微信支付订单数" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_wx_pay_amonut" title="微信支付金额" sortable align="center"></vxe-column>
				<vxe-column width="180" field="order_return_pay_amount" title="退款金额" sortable align="center"></vxe-column>
				<template #empty>
					<div class="d-flex flex-row a-center j-center font-md">
						<div class="d-flex">
							暂时没有统计数据~
						</div>
					</div>
				</template>
			</vxe-table>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page"
					:page-size="dataForm.pageSize" :total="total" :pageSizes="[20,50,100,150,200]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex b-s mt-2 mb-10" src="../../../public/image/download.png" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mixinViewModule from '@/mixins/view-module'
	import {
		Decimal
	} from 'decimal.js'
	export default {
		mixins: [mixinViewModule],
		components: {},
		data() {
			return {
				show_playlet_name:false,
				info_applet_id:null,
				playletList:[],
				tableLoading:false,
				templateId: '',
				curent: 0,
				total: 0,
				firstConvention: {},
				searchForm: {
					keyword:''
				},
				dataForm: {
					page: 1,
					pageSize: 20
				},
				templateForm: {
					
				},
				companyName: [],
				appletList: [],
				sortInfo: [], //排序
				// 增改
				dataList: [],
			}
		},
		created() {
			console.warn('createdcreatedcreatedcreatedcreatedcreated');
			this.info_applet_id = this.info.applet_id;
			this.dataForm['applet_id'] = this.info.applet_id;
			this.dataForm['delivery_user_id'] = this.info.delivery_user_id;
			this.templateForm['applet_id'] = this.info.applet_id;
			this.templateForm['delivery_user_id'] = this.info.delivery_user_id;
			this.appletList = this.info.applet;
			console.log(this.templateForm);
		},
		mounted() {
		},
		computed: {
			...mapState('d2admin/user', [
				'info'
			])
		},
		watch: {
			'info.applet_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (typeof newVal == 'number') {
							console.warn('========监听小程序ID发生变化=======');
							console.log(newVal);
							this.dataForm['applet_ids'] = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:spreadStatistics:index')) {
								if(this.$hasPermission('delivery:delivery:teamList')){
									if(Array.isArray(this.dataForm['delivery_user_id'])){
										this.getTableList(true);
									}
									return;
								}
								this.getTableList(true);
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			'info.delivery_user_id': {
				handler(newVal,oldVal) {
					if(newVal!=oldVal){
						if (Array.isArray(newVal)) {
							console.warn('========投放组员ID发生变化=======');
							console.log(newVal);
							this.dataForm['delivery_user_id'] = newVal;
							this.$forceUpdate();
							if (this.$hasPermission('delivery:spreadStatistics:index')) {
								this.getTableList(true);
							}
						}
					}
				},
				deep: true,
				immediate: true
			},
			sortInfo: {
				handler(newValue) {
					console.warn('===排序改变===');
					console.log(newValue);
				},
				deep: true
			},
			templateForm: {
				handler(newValue) {
					// console.warn('监听到了');
					// console.log(newValue);
					this.dataForm = [];
					// console.log(this.sortInfo.length);
					let a = [],
						b = this.sortInfo,
						c = [];
					for (let key in newValue) {
						if (Array.isArray(newValue[key])) {
							for (var i = 0; i < newValue[key].length; i++) {
								if (newValue[key][i].value) {
									if (newValue[key][i].status) {
										c.push(newValue[key][i]);
									}
									if (b.indexOf(newValue[key][i].value) > -1) {
										a.push(newValue[key][i]);
									}
								}
							}
						}
					}
					if (b.length) {
						// console.log('===排序===');
						//排序
						this.dataForm = a.sort(function(item1, item2) {
							return b.indexOf(item1.value) - b.indexOf(item2.value);
						});
					} else {
						// console.log('===没有排序===');
						this.dataForm = c;
					}
					// console.log(this.dataForm);
				},
				deep: true
			}
		},
		methods: {
			...mapMutations({
				pageInit: 'd2admin/page/init',
				headerSet: 'd2admin/menu/headerSet'
			}),
			//获取短剧列表
			async playletListFn() {
				// console.log(184)
				// const pRes = await this.$axios.get(`/api/statistics/getplayletInfo?applet_ids=${this.info.applet_id}`);
				const pRes = await this.$axios.get(`/api/delivery/getplayletInfo?applet_ids=${this.info.applet_id}`);
				console.log(pRes);
				if(Array.isArray(pRes)) {
					if (pRes.length) {
						this.playletList = pRes;
						return;
					}
				}
				this.playletList = [];
			},
			async getTableList(init = false) {
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				if(this.dataForm.playlet_id&&this.dataForm.playlet_id!=1){
					this.show_playlet_name = true;
				}else{
					this.show_playlet_name = false;
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/delivery/SpreadStatistics?' + this.$qs.stringify(this.dataForm));
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>